﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="layui/css/layui.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="icon/iconfont.css" rel="stylesheet" />
    <style>
      
    </style>
</head>
<body>
    <header class="flex flex-row app-command-bar">
        <div class="flex-1 drag text-left region">
            <button class="layui-btn" id="region">
                <span id="region_name">中国 (香港)</span>
                <i class="layui-icon layui-icon-down layui-font-12"></i>
            </button>
            <button class="layui-btn" id="period">
                <span id="period_value">15s</span>
                <i class="layui-icon layui-icon-down layui-font-12"></i>
            </button>
        </div>
        <ul class="layui-btn-group system-commands">
            <li formium-command="minimize" class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="iconfont iconmin"></i>
            </li>
            <li formium-command="maximize" class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="layui-icon layui-icon-screen-full"></i>
            </li>
            <li formium-command="close" class="layui-btn layui-btn-danger layui-btn-sm">
                <i class="layui-icon layui-icon-close"></i>
            </li>
        </ul>
    </header>

    <div class="page">
        <div style="height:35px;"></div>
        <div class="layui-row container">

        </div>

    </div>
    <script type="text/html" id="bg-template">
        <style>
            body:after {
                background: url("images/{{parseInt(Math.random()*10)+1}}.jpg") !important;
            }
        </style>
    </script>
    <script type="text/html" id="ecs-template">
        {{# layui.each(d.Instance, function(index, item){ }}
        <div class="layui-col-md3 layui-col-sm4 layui-col-xs6 ecs" data-id="{{item.InstanceId}}">
            <div class=" layui-card glass">
                <div class="layui-card-header flex flex-row">
                    <div class="flex-1 text-left layui-elip">
                        <span class="layui-font-16 " title="{{item.Status}}">{{item.InstanceName}}</span>
                        {{# if(item.Status=="Running"){ }}
                        <span class="layui-font-12 text-color-blue">{{item.Status}}</span>
                        {{# } }}
                        {{# if(item.Status!="Running"){ }}
                        <span class="layui-font-12 text-color-cyan">{{item.Status}}</span>
                        {{# } }}
                        <span class="layui-font-12 text-color-cyan">{{item.NetworkInterfaces.NetworkInterface[0].PrimaryIpAddress}}</span>
                    </div>
                    {{# if(item.Status=="Running"){ }}
                    <div class="text-right restart" title="重启" data-id="{{item.InstanceId}}">
                        <i class="layui-icon layui-icon-pause"></i>
                    </div>
                    {{# } }}
                    {{# if(item.Status!="Running"){ }}
                    <div class="text-right start" title="启动" data-id="{{item.InstanceId}}">
                        <i class="layui-icon layui-icon-play"></i>
                    </div>
                    {{# } }}
                </div>
                <div class="layui-card-body">
                    <div class="line-char memory-{{item.InstanceId}}">

                    </div>
                    <div class="line-char cpu-{{item.InstanceId}}">

                    </div>
                </div>
                <div class="layui-card-footer flex" title="{{item.OSName}}">
                    <div class="flex-1 layui-elip">
                        <span class="layui-font-12 text-color-cyan">{{item.OSName}}</span>
                    </div>
                    <div class="stop" title="强制关机" data-id="{{item.InstanceId}}">
                        <i class="layui-icon layui-icon-logout"></i>
                    </div>
                </div>
            </div>
        </div>
        {{# }) }}
    </script>

    <script src="layui/layui.js"></script>
    <script src="scripts/echarts.min.js"></script>
    <script>
        const aliyun = "http://api.cloud.zpay/aliyun/";
        layui.use(function () {
            var layer = layui.layer
                , $ = layui.$
                , laytpl = layui.laytpl
                , $bgTmp = $("#bg-template").html()
                , form = layui.form, element = layui.element
                , laydate = layui.laydate
                , util = layui.util, dropdown = layui.dropdown,
                $gn = $("#region_name"),
                $pv = $("#period_value"),
                region = "cn-hongkong",
                $container = $(".container"),
                $ecsTmp = $("#ecs-template").html(),
                timeInvad = 10,
                period="15";

            layui.onevent("region", "region_change", function (d) {
                $gn.text(d.title);
                region = d.id;
                getEcs();
            });
            layui.onevent("period", "period_change", function (d) {
                $pv.text(d.title);
                period = d.id;
                getRunning();
            });
            getEcs = () => {
                $.get(aliyun + "ecs/get?region=" + region)
                    .then(r => {
                        laytpl($ecsTmp).render(r, function (html) {
                            $container.html(html);
                        });
                        $(".container .restart").on("click", (e) => {
                            reStart($(e.currentTarget).attr("data-id"));
                        });
                        $(".container .start").on("click", (e) => {
                            start($(e.currentTarget).attr("data-id"));
                        });
                        $(".container .stop").on("click", (e) => {
                            stop($(e.currentTarget).attr("data-id"));
                        });
                        getRunning();
                    });
            }
            
            getRunning = async () => {
                for (var $item of $(".container .ecs")) {
                    var id = $($item).attr("data-id");
                    await getMomery(id);
                    await getCpu(id);
                }
            };
            getMomery = async (id) => {
                var chars = "memory-" + id;
                var res = await $.get(aliyun + "monitor/memory?id=" + id + "&period=" + period);
                var data = JSON.parse(res).map(t => {
                    return { time: util.toDateString(t.timestamp, "HH:mm:ss"), max: t.Maximum, min: t.Minimum, ave: t.Average }
                });
                drawChart(chars, data,"内存");
            };
            getCpu = async (id) => {
                var chars = "cpu-" + id;
                var res = await $.get(aliyun + "monitor/cpu?id=" + id + "&period=" + period);
                var data = JSON.parse(res).map(t => {
                    return { time: util.toDateString(t.timestamp, "HH:mm:ss"), max: t.Maximum, min: t.Minimum, ave: t.Average }
                });
                drawChart(chars, data,"CPU");
            };
            reStart = (id) => {
                layer.confirm('确定要重启服务器?', function (index) {
                    layer.close(index);
                    var lid = layer.load(1);
                    $.get(aliyun + "ecs/resboot?id=" + id + "&region=" + region)
                        .then(r => {
                            layer.close(lid);
                        });
                });
            };
            start = (id) => {
                layer.confirm('确定启动服务器?', function (index) {
                    layer.close(index);
                    var lid = layer.load(1);
                    $.get(aliyun + "ecs/start?id=" + id + "&region=" + region)
                        .then(r => {
                            layer.close(lid);
                        });
                });
            };
            stop = (id) => {
                layer.confirm('[ 确定 ] 强制关机?', {title:"再次确认!"}, function (index) {
                    layer.close(index);
                    var lid = layer.load(1);
                    $.get(aliyun + "ecs/stop?id=" + id + "&region=" + region)
                        .then(r => {
                            layer.close(lid);
                        });
                });
            };
            drawChart = (chartid, r, n) => {
                if (r.length <= 0) return;
                option = {
                    title: {
                        text: n, textStyle: {
                            color:"rgba(255,255,255,0.1)"
                        },
                        left:30
                    },
                    color: [
                        '#c23531',
                        '#2ecc71',
                        '#3498db',
                        '#874521'
                    ],
                    tooltip: {
                        backgroundColor: "rgba(0,0,0,0.4)",
                        borderColor: "rgba(255,255,255,0.2)",
                        textStyle: {
                            color:"rgba(255,255,255,0.7)"
                        },
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter: "time : {b}<br/>{a0} : {c0} %<br/>{a1} : {c1} %<br/>{a2} : {c2} %<br/>"
                    },
                    grid: {
                        left: '0%',
                        right: '0%',
                        bottom: '0%',
                        containLabel: true,
                        height: 80,
                        width:"100%"
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: r.map(t => t.time),
                            show: false
                        }
                    ],
                    yAxis: {
                        type: 'value',
                        max: 100,
                        min: 0,
                        show: true, axisLabel: { color: "rgba(255,255,255,0.3)" },
                        interval:40,
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,0.05)"
                            }
                        }
                        
                    },
                    series: [{
                        name: 'max',
                        data: r.map(t => t.max),
                        type: 'line'
                    }, {
                        name: 'min',
                        data: r.map(t => t.min),
                        type: 'line'
                    }, {
                        name: 'ave',

                        data: r.map(t => t.ave),
                        type: 'line'
                    }]
                };
                var chart = echarts.init($("." + chartid).get(0));
                chart.setOption(option);
                window.addEventListener("resize", chart.resize);
            }
            changeBg = () => {
                laytpl($bgTmp).render({}, function (html) {
                    $("style").append(html);
                });
            };
            setInterval(getRunning, timeInvad * 1000);
            setInterval(changeBg, timeInvad * 3 * 1000);
            $(function () {
                dropdown.render({
                    elem: "#period",
                    trigger: "hover",
                    data: [{ title: "15s", id: "15" }, { title: "60s", id: "60" }, { title: "300s", id: "300" }, { title: "900s", id: "900" }, { title: "3600s", id: "3600" }],
                    click: (item, elm) => {
                        layui.event("period", "period_change", item);
                    }
                });
                $.get(aliyun + "region/get")
                    .then(r => {
                        var data = r.Region.map(t => {
                            return { title: t.LocalName, id: t.RegionId };
                        });
                        dropdown.render({
                            elem: "#region",
                            trigger: "hover",
                            data: data,
                            click: (item, elm) => {
                                layui.event("region", "region_change", item);
                            }
                        });
                    });
                getEcs();
            });
        });
    </script>
</body>
</html>